<template>
  <div>
    <ul>
      <li v-for="(value, key) in person" :key="key">{{ key }} - {{ value }}</li>
    </ul>
    <button @click="add1">添加111</button>

    <ul>
      <li v-for="(person, index) in persons" :key="index">
        {{ person.name }} - {{ person.age }} - {{ person.sex }}
      </li>
    </ul>
    <button @click="add2">添加222</button>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "App",
  data() {
    return {
      person: {
        name: "jack",
        age: 18,
      },
      persons: [
        { name: "jack", age: 18 },
        { name: "rose", age: 10 },
      ],
    };
  },
  methods: {
    add1() {
      /*
        响应式概念：更新数据，数据变化，视图也变化
        什么数据是响应式数据：data computed

        特点：
          如果数据是定义时已存在的，就是响应式的
          如果数据是新添加的，就不是响应式
      */
      // this.person.age++; // 是响应式
      // this.person.sex = "男"; // 不是响应式

      // 给person对象添加一个响应式属性sex，值为男
      // Vue.set(this.person, "sex", "男");
      this.$set(this.person, "sex", "男");
    },
    add2() {
      // 变更方法: vue对其进行重新定义，定义成响应式的方法
      // 文档：https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95
      // this.persons.push({ name: "老罗", age: 38 }); // 是响应式（特殊）
      // this.persons[this.persons.length] = { name: "老罗", age: 38 }; // 不是响应式
      // this.persons[0].age++; // 是响应式
      this.persons[0].sex = "男"; // 不是响应式
    },
  },
};
</script>

<style>
</style>